<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>医生信息</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			.van-cell__title {
				color: #3e3e3e;
				font-size: 14px;
			}
			.van-cell__value {
				color: rgba(62, 62, 62, 100);
				font-size: 16px;
			}
			.van-button--info {
				background-color: #e22e30;
				border-color: #e22e30;
				font-size: 18px;
			}
			.van-cell {
				padding: 10px 5px;
			}
			.van-cell-group--inset {
				margin: 0 5px;
			}
			.van-cell::after {
				left: 5px;
				right: 5px;
			}
			.id_container {
				position: absolute;
				top: 2%;
				left: 3%;
				z-index: 100;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_background" v-if="!from"></div>
			<div class="id_background" v-else style="background: #01cd9c"></div>
			<div class="id_container">
				<div class="doctor_box_100 doctor_box">
					<div class="di_top_left" style="width: 30%">
						<img v-if="!detail.doctorsImg" src="img/logo.png" />
						<img v-if="detail.doctorsImg" :src="detail.doctorsImg" />
						<p>{{detail.doctorsLevel}}</p>
					</div>
					<div class="di_top_right">
						<div class="flex" style="align-items: center">
							<span class="di_top_name">{{detail.doctorsName||匿名}}</span>
							<span v-if="detail.doctorsAge">{{detail.doctorsAge}}岁</span>
							<span class="di_top_sex">
								<img
									v-if="detail.doctorsSex==1"
									src="img/man.png"
									style="display: block"
								/>
								<img
									v-if="detail.doctorsSex==2"
									src="img/woman.png"
									style="display: block"
								/>
							</span>
						</div>
						<p style="margin: 0.12rem 0">工作所在地：{{detail.doctorsCity}}</p>
						<p @click="callphone">
							<van-icon name="phone-o" />{{detail.doctorsMobile}}
						</p>
					</div>
				</div>
				<div class="id_info">
					<van-cell-group inset>
						<van-cell>
							<template #title>
								<span class="custom-title"> 医院 </span>
							</template>
							<template #value> {{detail.doctorsHospital}} </template>
						</van-cell>
						<van-cell>
							<template #title>
								<span class="custom-title"> 职称 </span>
							</template>
							<template #value> {{detail.doctorsLevel}} </template>
						</van-cell>
						<van-cell>
							<template #title>
								<span class="custom-title"> 执业经验 </span>
							</template>
							<template #value> {{detail.workingTime}} 年</template>
						</van-cell>
					</van-cell-group>
				</div>

				<div v-if="detail.doctorsWorkExperience">
					<div class="doctor_left_title">
						<span class="doctor_left_title_border" v-if="!from"></span>
						<span
							class="doctor_left_title_border"
							v-else
							style="background-color: #01cd9c"
						></span>
						<span class="doctor_left_title_name">医生经历</span>
					</div>

					<div class="doctor_box doctor_box_100">
						<p>{{detail.doctorsWorkExperience}}</p>
					</div>
				</div>

				<div v-if="detail.doctorsSpecialSkill">
					<div class="doctor_left_title">
						<span class="doctor_left_title_border" v-if="!from"></span>
						<span
							class="doctor_left_title_border"
							v-else
							style="background-color: #01cd9c"
						></span>
						<span class="doctor_left_title_name">职业专长</span>
					</div>
					<div class="doctor_box doctor_box_100">
						<p>{{detail.doctorsSpecialSkill}}</p>
					</div>
				</div>

				<div class="edit_doctorinfo" v-if="editshow">
					<van-button round type="info" block @click="linkToEdit(detail.dataId)"
						>修改资料</van-button
					>
				</div>
			</div>
			<link-index v-if="!from"></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					url: {
						getDetail: '/201/02/2010201',
					},
					detail: {},
					doctorId: '',
					level: [],
					org: [],
					levelList: [],
					orgList: [],
					editshow: false,
				}
			},
			created() {
				this.doctorId = url('?id')
				this.init()
				if (url('?from')) {
					this.from = url('?from')
				} else {
					if (url('?id') == localStorage.getItem('did')) {
						this.editshow = true
					} else {
						this.editshow = false
					}
				}
			},
			methods: {
				init() {
					this.handleGetDetail()
				},
				handleGetDetail() {
					postAction(spliceUrl(this.url.getDetail), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						console.log('handleGetDetail', res)
						if (res.success) {
							this.detail = res.result
							this.handleGetOrg()
						}
					})
				},
				handleGetOrg() {
					getAction(spliceUrl('/sys/dict/getDictItems/jobTitle')).then(res => {
						res = res.data
						console.log('handleGetLevel', res)
						if (res.success) {
							this.levelList = res.result
							this.levelList.forEach(v => {
								if (this.detail.doctorsLevel == v.value) {
									this.detail.doctorsLevel = v.title
								}
							})
						}
					})
					getAction(spliceUrl('/sys/sysDepart/queryTreeList')).then(res => {
						res = res.data
						console.log('handleGetLevel', res)
						if (res.success) {
							this.orgList = res.result[0].children.map(v => {
								return {
									title: v.title,
									orgCode: v.orgCode,
								}
							})
							// this.orgList.forEach(v => {
							// 	if (this.detail.doctorsHospital == v.orgCode) {
							// 		this.detail.doctorsHospital = v.title
							// 	}
							// })
						}
					})
				},
				callphone() {
					window.location.href = 'tel://' + this.detail.doctorsMobile
				},
				linkToEdit(id) {
					window.location.href = 'editDoctorInfo.html?id=' + id
				},
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
